import React, { Component } from "react";
import { Button, Tabs } from "antd";
import Verification from "./verification";
import invoiceManagementService from "../invoice-management-service";
import constants from "share/constants";
import Info from "components/info";
import { messages } from "share/common";
import SlideFrame from "components/slide-frame";
import InvoiceCheckForm from "../invoice-check-form";
import { connect } from "react-redux";
import { setInvoiceCheckTab } from "actions/cache";

const { TabPane } = Tabs;

class InvoiceCheckDetails extends Component {
  state = {
    tabs: [
      {
        key: "head-up-verification",
        tab: messages("expense-3.key147") /*抬头校验*/,
      },
      // {
      //   key: "consecutive-verification",
      //   tab: messages("expense-3.key148") /*连号校验*/,
      // },
      // {
      //   key: "overdue-verification",
      //   tab: messages("expense-3.key149") /*逾期校验*/,
      // },
      // {
      //   key: "owner-verification",
      //   tab: messages("expense-3.key150") /*归属人校验*/,
      // },
      // {
      //   key: "match-check",
      //   tab: messages("expense-3.key151") /*发票&费用匹配校验*/,
      // },
      // {
      //   key: "compliance-check",
      //   tab: messages("expense-3.key152") /*合规性校验*/,
      // },
      // {
      //   key: "repeat-verification",
      //   tab: messages("expense-3.key153") /*重复校验*/,
      // },
    ],
    info: {
      attributes: [
        {
          title: messages("expense-3.key154") /*层级*/,
          dataIndex: "levelCode",
          span: 8,
          render: (value) => constants.levelCode[value],
        },
        {
          title: messages("expense-3.key155") /*所属组织*/,
          dataIndex: "levelOrgName",
          span: 8,
        },
        {
          title: messages("expense-3.key59") /*启用公司*/,
          dataIndex: "companyNameList",
          span: 8,
          render: (value) =>
            value ? value.join(",") : messages("expense-3.key60") /*通用*/,
        },
      ],
    },
  };

  componentDidMount() {
    this.handleInitDate().then();
  }

  handleInitDate = async () => {
    const { info } = this.state;
    const {
      params: { id },
    } = this.props;
    const ret = await invoiceManagementService.getInvoiceCheckDetails(id);
    info.dataSource = ret.data;
    this.setState({ info });
  };

  handleEditDate = () => {
    const { tenant } = this.props;
    const {
      info: { dataSource },
    } = this.state;
    SlideFrame.open(
      {
        title: messages("common.create") /*新建*/,
        content: InvoiceCheckForm,
        afterClose: this.afterCloseSlideFrame,
        params: {
          tab: "invoice-check",
          tenant,
          ...dataSource,
        },
      },
      this
    );
  };

  handleJump = () => {
    window.open("/main/setting/invoice-management-control/invoice-to-cost");
  };

  afterCloseSlideFrame = (flag) => {
    flag && this.handleInitDate();
  };

  handleTabChange = (key) => {
    this.props.dispatch(setInvoiceCheckTab(key));
  };

  renderTitle = () => {
    return (
      <section style={{ marginBottom: "12px" }}>
        <div>
          <span>
            {
              messages(
                "expense-3.key156"
              ) /*说明：对于下述各类校验，系统默认强弱管控均有详细说明。若需更改，可跳转至*/
            }
          </span>
          <Button ghost type="link" onClick={this.handleJump}>
            <span>
              {
                messages(
                  "expense-3.key157"
                ) /*【申请与报销设置-发票设置-发票管控-发票生成费用】*/
              }
            </span>
          </Button>
          <span>{messages("expense-3.key158") /*设置规则*/}</span>
        </div>
      </section>
    );
  };

  render() {
    const { tabs, info } = this.state;
    const {
      params: { id },
      invoiceCheckTab = "head-up-verification",
    } = this.props;
    return (
      <section>
        {this.renderTitle()}
        <Info title={messages("expense-3.key159") /*基础设置*/} {...info}>
          <Button onClick={this.handleEditDate} type="primary">
            {messages("common.edit") /*编辑*/}
          </Button>
        </Info>
        <Tabs
          animated={false}
          defaultActiveKey={invoiceCheckTab}
          onChange={this.handleTabChange}
        >
          {tabs.map((item) =>
            React.createElement(
              TabPane,
              item,
              <Verification params={item} key={item.key} id={id} />
            )
          )}
        </Tabs>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
    invoiceCheckTab: state.cache.invoiceCheckTab,
  };
}

InvoiceCheckDetails.propTypes = {};

export default connect(mapStateToProps)(InvoiceCheckDetails);
